<script setup lang="ts">
// 🧨🧨第一种：官网弃用！！不推荐
// const { size = 'large', type = 'default' } = defineProps<{
//   size?: 'large' | 'middle' | 'samll' | 'mini'
//   type?: 'default' | 'primary' | 'plain' | 'gray'
// }>()

// 🎈🎈第二种：PropType写法
import type { PropType } from 'vue'
defineProps({
  size: {
    type: String as PropType<'mini' | 'small' | 'middle' | 'large'>,
    default: 'small',
  },
  type: {
    type: String as PropType<'gray' | 'plain' | 'primary' | 'default'>,
    default: 'gray',
  },
})

// ✨✨推荐使用
// withDefaults(
//   defineProps<{
//     size?: 'large' | 'middle' | 'samll' | 'mini'
//     type?: 'default' | 'primary' | 'plain' | 'gray'
//   }>(),
//   {
//     size: 'large',
//     type: 'default',
//   }
// )
</script>
<template>
  <button class="xtx-button ellipsis" :class="`${type}  ${size}`">
    <slot></slot>
  </button>
</template>

<style scoped lang="less">
// 基于类名定义一些和定制样式无关的样式
.xtx-button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
// 大
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}
// 中
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
// 小
.small {
  width: 100px;
  height: 32px;
}
//超小
.mini {
  width: 60px;
  height: 32px;
}
.default {
  border-color: #e4e4e4;
  color: #666;
}
// 确认
.primary {
  border-color: @xtxColor;
  background: @xtxColor;
  color: #fff;
}
// 普通
.plain {
  border-color: @xtxColor;
  color: @xtxColor;
  background: lighten(@xtxColor, 50%);
}
// 灰色
.gray {
  border-color: #ccc;
  background: #ccc;
  color: #fff;
}
</style>
